<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../inc/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>我的等级</title>
    <link rel="stylesheet" type="text/css" href="${contextPath}/static/prize/css/style.css">
</head>
<body>
<header>
    <img src="${contextPath}/static/prize/img/1.png">
    <div class="user">${userInfo.nickname}<span class="font1">LV${userInfo.level}</span></div><!-- 用户名称和等级 -->
    <div class="content_circular"><!-- 中间圆形区域 -->
        <div class="circular">
            <p>${userInfo.integral}</p>
            <p>经验值</p>
        </div>
        <c:if test="${userInfo.level < 18}">
            <div>
                <p class="font">还需${levelUpIntegral}可升级</p>
            </div>
        </c:if>
    </div><!-- 中间圆形区域 -->
</header>
<section>
    <div class="title"><span></span><span>等级定义</span></div>
    <div class="section_col flex">
        <div><span class="font2">LV1</span>0-150</div>
        <div><span class="font2">LV2</span>151-300</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV3</span>301-450</div>
        <div><span class="font2">LV4</span>451-750</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV5</span>751-1350</div>
        <div><span class="font2">LV6</span>1351-2250</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV7</span>2251-3450</div>
        <div><span class="font2">LV8</span>3451-4950</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV9</span>4951-6750</div>
        <div><span class="font2">LV10</span>6751-8550</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV11</span>8551-10350</div>
        <div><span class="font2">LV12</span>10351-12450</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV13</span>12451-14550</div>
        <div><span class="font2">LV14</span>14551-16650</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV15</span>16651-19050</div>
        <div><span class="font2">LV16</span>19051-21450</div>
    </div>
    <div class="section_col flex">
        <div><span class="font2">LV17</span>21451-23850</div>
        <div><span class="font2">LV18</span>23851+</div>
    </div>
</section>
<div class="border"></div>
<section>
    <div class="title1"><span></span><span>成长攻略</span></div>
    <div>
        <ol class="ol">
            <li>
                <ul>
                    <li>每日登录可获得50经验值，每日只能获取一次</li>
                    <li>发评论可获得20经验值，每日最多获得100经验值</li>
                    <li>发弹幕可获得20经验值，每日最多获得100经验值</li>
                    <li>点赞其他帖子可获得10经验值，每日最多获得50经验值</li>
                </ul>
            </li>
        </ol>
    </div>
</section>
<div class="border"></div>
<section>
    <div class="title"><span></span><span>等级特权</span></div>
    <div>
        <ol class="ol">
            <li>
                <ul>
                    <li>LV1以上可参与投票帖子</li>
                    <li>LV4以上可以发语音帖，帖子内容字数从200上升到500</li>
                    <li>LV10以上帖子内容字数从500上升到1000</li>
                </ul>
            </li>
        </ol>
    </div>
</section>
<div style="width: 100%;height: 2rem;"></div>


</body>
</html>